<template>
  <div>
    <div>
      <mt-header title="常用联系人" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
        <mt-button v-show="editflage" icon="" slot="right" @click="changeeditebutton()">编辑</mt-button>
        <mt-button v-show="completeflage" icon="" slot="right" @click="changecompletefalge()">完成</mt-button>
      </mt-header>
    </div>
    <div class="loadmore" ref="wrapper">
      <mt-loadmore :auto-fill="false" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore">
        <div class="page-loadmore-list">
          <div v-for="(item, $index) in list" class="info-show" :key="item.cid">
            <div class="info-show-mc">
              <span class="span-mc"> {{ item.mc }}</span>
            </div>
            <div class="info-show-sjh">
              <div class="child-div" float="left">
                <span class="span-sjh">手&nbsp;&nbsp;机&nbsp;&nbsp;号：</span>
                <span class="span-number">{{item.sjh}}</span>
              </div>
            </div>
            <div class="info-show-sfz">
              <span class="span-sjh">身份证号：</span>
              <span class="span-number">{{item.sfz}}</span>
            </div>
            <transition name="fade">
              <div class="child-div" v-show="editflage" style="position: absolute; right: 0;">
                <img class="right-button" slot="icon" src="../../assets/images/tool/right.png" width="20" height="20" @click="goEditcontacts(item)">
              </div>
            </transition>

            <transition name="fade">
              <div class="child-div" v-show="completeflage" style="position: absolute; right: 0;">
                <img class="right-button right-del" align="right" slot="icon" src="../../assets/images/tool/sq-delete.png" width="20" height="20" @click="deleteCommonPerson(item,$index)">
              </div>
            </transition>
          </div>
        </div>
        <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
          <span v-show="topStatus === 'loading'">
            <mt-spinner type="fading-circle"></mt-spinner>
          </span>
        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
          <span v-show="bottomStatus === 'loading'">
            <mt-spinner type="fading-circle"></mt-spinner>
          </span>
        </div>
      </mt-loadmore>
    </div>
    <div class="add-contacs-button">
      <button class="mint-button mint-button--default mint-button--large is-plain" @click="goAddcontacts()">
        <label class="mint-button-text">添加联系人</label>
      </button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import { Loadmore } from "mint-ui";
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      list: [],
      topStatus: "",
      wrapperHeight: 0,
      translate: 0,
      moveTranslate: 0,
      allLoaded: false,
      bottomStatus: "",
      editflage: true,
      completeflage: false
    };
  },
  beforeCreate() {
    // console.group("beforeCreate 创建前状态===============》");
  },
  beforeMount() {
    //console.group("beforeMount 挂载前状态===============》");
  },
  created() {
    // console.group("created 创建完毕状态===============》");
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  beforeUpdate() {
    // console.group("beforeUpdate 更新前状态===============》");
  },
  updated() {
    // console.group("updated 更新完成状态===============》");
  },
  beforeDestroy() {
    // console.group("beforeDestroy 销毁前状态===============》");
  },
  destroyed() {
    // console.group("destroyed 销毁完成状态===============》");
    this.$destroy();
  },
  mounted() {
    this.wrapperHeight = document.documentElement.clientHeight - 100;
    this.$refs.wrapper.getBoundingClientRect().top;
    axios({
      method: "post",
      url: "/api/mycyxxcylxr/list.htm",
      params: {
        id: 22
      }
    }).then(res => {
      res = res.data;
      if (res.zt === "true") {
        console.log(res.data);
        this.list = res.data;
      } else {
        Indicator.close();
        let instance = Toast({
          message: "加载失败"
        });
        setTimeout(() => {
          instance.close();
        }, 2000);
      }
    });
  },
  methods: {
    goBack() {
      this.$store.dispatch("showTabbar", { boolean: "0" });
      history.go(-1);
    },
    goDetailPage(info) {
      this.$store.dispatch("goDetailPage", { id: info.newsId });
    },
    handleTopChange(status) {
      this.moveTranslate = 1;
      this.topStatus = status;
    },
    changeeditebutton() {
      this.editflage = false;
      this.completeflage = true;
    },
    changecompletefalge() {
      this.editflage = true;
      this.completeflage = false;
    },

    deleteCommonPerson(item, index) {
      MessageBox.confirm("确定删除该联系人？").then(action => {
        let cid = item.cid;
        axios({
          method: "post",
          url: "/api/cylxrdelete/detail.htm",
          params: {
            cid: cid
          }
        }).then(res => {
          res = res.data;
          if (res.zt === "true") {
            this.list.splice(index, 1);
            Indicator.close();
            let instance = Toast({
              message: "删除成功"
            });
            setTimeout(() => {
              instance.close();
            }, 2000);
          } else {
            Indicator.close();
            let instance = Toast({
              message: "删除失败"
            });
            setTimeout(() => {
              instance.close();
            }, 2000);
          }
        });
      });
    },
    //添加联系人
    goAddcontacts() {
      this.$router.push("/addcontacts");
    },
    goEditcontacts(item) {
      let cid = item.cid;
      this.$router.push({ path: "/editcontacts", query: { rq: cid } });
    },
    // loadTop() {
    //   setTimeout(() => {
    //     let firstValue = this.list[0];
    //     for (let i = 1; i <= 5; i++) {
    //       this.list.unshift(firstValue - i);
    //     }
    //     this.$refs.loadmore.onTopLoaded();
    //   }, 1500);
    // },
    handleBottomChange(status) {
      this.bottomStatus = status;
    },
    loadBottom() {
      setTimeout(() => {
        let lastValue = this.list[this.list.length - 1];
        if (lastValue < 40) {
          for (let i = 1; i <= 5; i++) {
            this.list.push(lastValue + i);
          }
        } else {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      }, 1500);
    }
  }
};
</script>
<style scoped>
.child-view {
  height: 100%;
  overflow: hidden;
}
.loadmore {
  overflow: scroll;
  height: calc(100% - 100px);
}
.loading-background,
.mint-loadmore-top span {
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
.mint-loadmore-top span {
  display: inline-block;
  vertical-align: middle;
}

.mint-loadmore-top span.is-rotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.page-loadmore .mint-spinner {
  display: inline-block;
  vertical-align: middle;
}

.page-loadmore-desc {
  text-align: center;
  color: #666;
  padding-bottom: 5px;
}

.page-loadmore-desc:last-of-type,
.page-loadmore-listitem {
  border-bottom: 1px solid #eee;
}

.page-loadmore-listitem {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.page-loadmore-listitem:first-child {
  border-top: 1px solid #eee;
}

.page-loadmore-wrapper {
  overflow: scroll;
}

.mint-loadmore-bottom span {
  display: inline-block;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
  vertical-align: middle;
}

.mint-loadmore-bottom span.is-rotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.mint-loadmore-bottom {
  margin-bottom: -50px;
}
.info-show {
  margin: 0 10px;
  position: relative;
  height: 120px;
  -webkit-box-flex: 1;
  flex: 1;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  justify-content: space-around;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}
.info-show-mc {
  font-size: 18px;
  color: #333;
}
.info-show-sjh {
  font-size: 16px;
  color: #333;
}
.info-show-sfz {
  font-size: 16px;
  color: #333;
}
.right-button {
  margin-right: 10px;
}
.food {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 48px;
  z-index: 30;
  width: 100%;
  background: #fff;
}
/*定义元素从什么位置离开，以及离开岛指定位置所需的时间*/
.slide-leave-active {
  transition: all 0.5s ease;
  transform: translate3d(0, 0, 0);
}
/*定义元素从100%的位置移入到0，过渡结束后再从0回到100%的位置*/
.slide-enter,
.slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.child-div {
  display: inline;
}
.span-mc {
  width: 180px;
  float: left;
}
.span-sjh {
  width: 100px;
  display: -moz-inline-box;
  display: inline-block;
}
.span-number {
  width: 200px;
  display: -moz-inline-box;
  display: inline-block;
}
.add-contacs-button {
  height: 60px;
  padding: 10px 10%;
}
</style>